<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
	</head>
	<body>
		<div class="clock">
			<div class="sec-wrapper">
				<div class="sec"></div>
			</div>
			<div class="min-wrapper">
				<div class="min"></div>
			</div>
			<div class="hour-wrapper">
				<div class="hour"></div>
			</div>
		</div>
	</body>
</html>
<style type="text/css">
	.clock{
		width: 500px;
		height: 500px;
		border: 10px solid #000000;
		background-color: #bfa;
		border-radius: 50%;
		background-image: url(img/clock.jpg);
		background-size: 700px auto;
		background-position:  -31px -30px;
	}
	.sec-wrapper{
		width: 500px;
		height: 500px;
		animation: run 1s infinite steps(60);
		overflow: hidden;
		position: absolute;
	}
	.min-wrapper{
		width: 500px;
		height: 500px;
		animation: run 60s infinite steps(60);
		overflow: hidden;
		position: absolute;
	}
	.hour-wrapper{
		width: 500px;
		height: 500px;
		animation: run 720s infinite linear;
		overflow: hidden;
		position: absolute;
	}
	.sec{
		height: 240px;
		width: 4px;
		background-color: #DF5000;
		margin: 10px auto;
	}
	.min{
		height: 180px;
		width: 6px;
		background-color: black;
		margin: 70px auto;
	}
	.hour{
		height: 120px;
		width: 8px;
		background-color: black;
		margin: 130px auto;
	}
	@keyframes run{
		from{
			transform: rotate(0);
		}
		to{
			transform: rotate(360deg);
		}
	}
</style>